<template>
    <view :style="{ '--color': color }">
        <view class="coupon" v-if="Sale.exchangeFen > 0" @click.stop="Show = true">
            <text class="color_33 size32">积分</text>
            <text class="color_99 size26 m-left10" v-if="Sale.exchangeFen">可用{{ Sale.exchangeFen }}分抵扣{{ Sale.genToMoney }}元</text>
            <view class="couponBox">
                <view class="d-flex a-center p-right20">
                    <block v-if="pageData.useIntegral">
                        <text class="color size26">-￥</text>
                        <text class="color size36">{{ Sale.genToMoney.toFixed(2) }}</text>
                    </block>
                </view>
                <text class="iconfont icon-xiangyouxiayiye color_99 size26"></text>
            </view>
        </view>

        <u-popup :show="Show" @close="close" mode="bottom" :round="10" closeable>
            <view class="Wrapper">
                <view class="head">
                    <view class="head_title">积分兑换</view>
                </view>
                <view class="content">
                    <view class="PointsList" @click.stop="Use_points" :class="{ Active: pageData.useIntegral }">
                        <view class="wrap flex-1">
                            <text class="color_33 size32">抵扣</text>
                            <text class="color size32 m-right10">￥{{ genToMoney }}</text>
                            <text class="color_33 size32">使用{{ Sale.exchangeFen }}积分</text>
                        </view>
                        <view class="cou_Rigth">
                            <text class="icon-xuanzhong iconfont size28"></text>
                        </view>
                    </view>
                </view>
                <view class="footer">
                    <view class="newCreat" @click="close">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData', 'Sale'],
        data() {
            return {
                Show: false
            };
        },
        created() {},
        methods: {
            close() {
                this.Show = false;
            },

            Use_points() {
                this.$emit('Use_points');
            }
        },

        computed: {
            ...mapState(['color', 'vid']),
            genToMoney() {
                if (!this.Sale || !this.Sale.genToMoney) return;
                return this.Sale.genToMoney.toFixed(2);
            }
        }
    };
</script>
<!-- 
  type  1 抵用卷 2 折扣卷 3 兑换卷 4 免邮卷 
 
 -->
<style lang="scss" scoped>
    @mixin Fleac {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Wrapper {
        width: 100%;

        .head {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            &_title {
                width: 100%;
                padding: 30rpx 0 30rpx;
                display: flex;
                justify-content: center;
                color: #000;
                font-size: 34rpx;
                border-bottom: 1rpx solid #f8f8f8;
            }

            &_sale {
                width: 100%;
                padding: 20rpx 24rpx;

                .Sale_txt {
                    color: #000;
                    font-size: 24rpx;
                    font-weight: normal;
                }
            }
        }

        .content {
            width: 100%;
            background-color: #f7f8fa;
            min-height: 400rpx;
            padding: 0 24rpx 24rpx;
            overflow-y: scroll;

            .Lists {
                width: 100%;
                background-color: #ffffff;
                margin-top: 24rpx;
                display: flex;
                align-items: center;
                border-radius: 10rpx;
                overflow: hidden;

                .cou_Left {
                    @include Fleac;
                    flex-direction: column;
                    width: 200rpx;
                    height: 190rpx;
                    background-image: linear-gradient(to right, #6b98db, #6a7dd6);

                    .unit {
                        font-size: 28rpx;
                        margin-top: 22rpx;
                    }
                }

                .cou_Center {
                    flex: 1;
                    height: 190rpx;
                    padding: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .cou_title {
                        color: #333;
                        font-size: 26rpx;
                    }
                }
            }

            .PointsList {
                width: 100%;
                padding: 30rpx 24rpx;
                background-color: #ffffff;
                border-radius: 10rpx;
                margin-top: 24rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .cou_Rigth {
                width: 36rpx;
                height: 36rpx;
                border: 1px solid #ccc;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 20rpx;
            }

            .Active {
                .cou_Rigth {
                    background-color: var(--color);
                    border: 1px solid var(--color);
                }
            }
        }

        .footer {
            width: 100%;
            height: 100rpx;
            @include Fleac;

            .newCreat {
                @include Fleac;
                width: 600rpx;
                height: 70rpx;
                background-color: var(--color);
                border-radius: 35rpx;
                color: #ffffff;
                font-size: 32rpx;
            }
        }
    }

    .coupon {
        width: 100%;
        padding: 20rpx 0;
        display: flex;
        align-items: center;

        .couponBox {
            flex: 1;

            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
</style>
